<template>
  <div id="FbxViewer" ref="FbxViewer" class="fbx-viewer" style="width: 100%;height: 100%;" />
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
export default {
  name: 'FbxViewer',
  data() {
    return {
      container: null,
      clock: null,
      camera: null,
      scene: null,
      renderer: null,
      mixer: null,
      object: null
    }
  },
  mounted() {
    this.init()
    this.animate()
  },
  beforeDestroy() {
    window.removeEventListener('resize')
  },
  methods: {
    init() {
      this.clock = new THREE.Clock()
      this.container = document.getElementById('FbxViewer')
      this.camera = new THREE.PerspectiveCamera(45, this.$refs.FbxViewer.offsetWidth / this.$refs.FbxViewer.offsetHeight, 1, 500)
      this.camera.position.set(-0.456, 44.12, 18.537) // 相机位置
      this.camera.up.set(0, 0, 1) // 相机旋转:(0,1,0):正视, (1,0,0):躺视, (0,0,1):俯视
      this.scene = new THREE.Scene()
      this.scene.background = new THREE.Color(0x00081e)
      const light = new THREE.HemisphereLight(0x000000, 0x333333)
      light.position.set(0, 1, 0)
      this.scene.add(light)
      const light2 = new THREE.DirectionalLight(0x000000)
      light2.position.set(0, 1, 0)
      this.scene.add(light2)
      const loader = new FBXLoader()
      loader.load(`${require('@/assets/images/phm/fbx/test.fbx')}`, object => {
        this.object = object
        // this.object.rotate = new vector()
        this.scene.add(this.object)
      })
      this.renderer = new THREE.WebGLRenderer({ antialias: true })
      this.renderer.setPixelRatio(window.devicePixelRatio)
      this.renderer.setSize(this.$refs.FbxViewer.offsetWidth, this.$refs.FbxViewer.offsetHeight)
      this.renderer.shadowMap.enabled = true
      this.container.appendChild(this.renderer.domElement)
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.target.set(0, -2.5, 10)
      this.controls.autoRotate = false
      this.controls.update()
      window.addEventListener('resize', this.onWindowResize, false)
      // this.controls.addEventListener('change', this.controlChange, false)
      // stats
      // stats = new Stats()
      // container.appendChild(stats.dom)
    },
    animate() {
      requestAnimationFrame(this.animate)
      // const delta = this.clock.getDelta()
      // if (this.mixer) this.mixer.update(delta)
      // this.camera.rora.y++
      this.renderer.render(this.scene, this.camera)
      if (this.controls) {
        this.controls.update()
      }
      // this.stats.update()
    },
    onWindowResize() {
      this.camera.aspect = this.$refs.FbxViewer.offsetWidth / this.$refs.FbxViewer.offsetHeight
      this.camera.updateProjectionMatrix()
      this.renderer.setSize(this.$refs.FbxViewer.offsetWidth, this.$refs.FbxViewer.offsetHeight)
    }
  }
}
</script>

<style scoped>

</style>
